<template>
  <div class="home">

    <el-container  style="position: relative;">
      <el-header class="home-el-header" style="padding: 0px;margin-top: 0px;margin-bottom: 10px">
        <div class="uoko-nav" style="width: 100%">
          <div class="container clearfix">
            <div class="uoko-navbar-left">
              <a href="/" class="site-logo"><img src="../assets/logo.png" width="165px" height="50px"></a>

              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                广东省<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <span class="el-dropdown-link">
                {{ city.name }}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="item in cityList" :command="item.id">{{ item.name }} </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="uoko-navbar" style="display: flex">
<!--              <ul>-->
<!--                <li class="active"><a href="/">首页</a></li>-->
<!--                <li><a href="/room">我要租房</a></li>-->
<!--&lt;!&ndash;                <li><a href="/questions">租前须知</a></li>&ndash;&gt;-->

<!--                <li style="position:relative">-->
<!--                  <a href="/trust">我要买房</a>-->
<!--                </li>-->
<!--                <li><a href="/about#slide-1">关于千寻</a></li>-->
<!--                <li><a href="/history">资讯</a></li>-->
<!--              </ul>-->

              <el-menu :default-active="activeIndex"
                       class="el-menu-demo"
                       mode="horizontal"
                       @select="handleSelect"
                       background-color="#41cbc0"
                       text-color="#fff"
                       active-text-color="#fff"
                       style="margin-left: 30px"
              >
                <el-menu-item index="/index">主页</el-menu-item>
                <el-menu-item index="/lease-house">我要租房</el-menu-item>
                <el-submenu index="3">
                  <template slot="title">我要买房</template>
                  <el-menu-item index="/new-house">买新房</el-menu-item>
                  <el-menu-item index="/second-hand-house">买二手房</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">新闻快讯</template>
                  <el-menu-item v-for="item in newsCategoryList" :index="item.id">{{ item.name }}</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
            <div class="uoko-navbar-right login-box">
              <div class="login-user" v-if="ifs">
                <span class="welcome">欢迎<b><a href="/userDetail">{{loginUser.username}}</a></b>! </span>
                <el-dropdown @command="userInformation">
                  <el-avatar style="position: relative;top: 10px" size="small" :src="loginUser.avatar"></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus" command="/userDetail">修改资料</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus" command="/user-collection-house">收藏房源</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline" command="/user-news-list">收藏资讯</el-dropdown-item>
<!--                    <el-dropdown-item icon="el-icon-phone" command="/reservation">我的预约</el-dropdown-item>-->
                    <el-dropdown-item icon="el-icon-check" divided command="openLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="uoko-navbar-right login-box" v-else>
                <a href="/login">登录</a><span>|</span><a href="/reg">注册</a>
              </div>
            </div>
          </div>
        </div>
      </el-header>

      <el-main>
<!--        <div style="width: 900px;height: 200px;border: 1px red solid;padding: 0px;margin: 0px">-->
<!--        </div>-->
          <router-view></router-view>
      </el-main>

<!--      <el-footer style="padding: 0px;position: absolute;bottom: 0px;width: 100%;height: auto;">-->
        <div style="margin-top: 153px">
          <div class="instr">
            <ul class="instr-list">
              <li class="sprites instr-quanlity">
                <h4 class="text-hidden">品质</h4>
                <p class="text-hidden">时尚装修 品牌家电 wifi覆盖</p>
              </li>
              <li class="sprites instr-secure">
                <h4 class="text-hidden">安全</h4>
                <p class="text-hidden">租客认证 品质小区 一客一锁</p>
              </li>
              <li class="sprites instr-serve">
                <h4 class="text-hidden">服务</h4>
                <p class="text-hidden">定期保洁 月付租金 及时维修</p>
              </li>
              <li class="sprites instr-prom">
                <h4 class="text-hidden">承诺</h4>
                <p class="text-hidden">100%真实房源 通俗公示 一房一价</p>
              </li>
            </ul>
          </div>

          <div class="footer" id="page-footer">
            <div class="container clearfix">
              <div class="footer-slogan"><img src="../assets/footer-setup2.png" width="483" height="70"></div>
              <div class="social"><a href=""><i class="sprites icon-social-msg"></i>投诉及公示</a></div>
              <div class="qr-code">
                <div class="qr-code-box"></div>
                <div class="qr-code-box"></div>
              </div>
              <div class="clearfix"></div>
              <div class="ext-links">
              </div>
            </div>
          </div>

<!--          <div class="bottom" id="page-bottom" style="margin-top: 0px">-->
<!--            <div class="container clearfix">-->
<!--              <div class="site-info">Copyright © 2012-2020 uoko.com. All Rights Reserved 经营许可证号川B2-20150131<a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">蜀ICP备13015638号-1</a></div>-->
<!--              <ul class="bottom-nav">-->
<!--                <li><a href="/" target="_blank">首页</a></li>-->
<!--                <li><a href="/youletter" target="_blank">给你的信</a></li>-->

<!--                <li><a href="/about#slide-1" target="_blank">关于千寻</a></li>-->


<!--                <li><a href="/aboutus/contact" target="_blank">联系千寻</a></li>-->
<!--              </ul>-->
<!--            </div>-->
<!--            <div class="container clearfix text-center beian-info" style="position: relative;top: 8px">-->
<!--              <i class="icon-ga"></i>-->
<!--              <span>川公网安备-->
<!--                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002001885" target="_blank" rel="nofollow">51019002001885号</a>-->
<!--                    </span>-->
<!--            </div>-->
<!--          </div>-->

        </div>

<!--      </el-footer>-->
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      newsCategoryList: [],
      cityList: [],
      city: '',
      loginUser:{},
      ifs: ''
    };
  },
  methods: {
    handleHouseCollection(){
      this.$router.push('/user-collection-house');
    },
    handleNewsCollection(){
      this.$router.push('/user-news-list');
    },
    handleCommand(command) {
      let cityParentId = this.$router.currentRoute.query.cityParentId;
      let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
      let newsDetailId = this.$router.currentRoute.query.newsDetailId;

      let path = this.$router.currentRoute.path;
      if (cityParentId != command) {
        // this.$router.push(path + '?cityParentId=' + command);
        this.$router.push({
          path: path,
          query: {
            cityParentId: command,
            newsCategoryId: newsCategoryId,
            newsDetailId: newsDetailId
          }
        })
      }
      this.loadCityName();

      this.$router.go(0);
    },
    userInformation(command){
      let path = this.$router.currentRoute.path;
      if (command == 'openLogout'){
        this.openLogout();
      }
      if (path != command) {
        if (command == '/user-collection-house'){
          this.handleHouseCollection();
        }
        if (command == '/user-news-list'){
          this.handleNewsCollection();
        }
        if (command == '/userDetail'){
          this.handleUserInfo();
        }
        if (command == '/reservation'){
          this.handleReservation();
        }
      }
    },
    handleReservation(){
      this.$router.push('/reservation');
    },
    handleUserInfo() {
      this.$router.push('/userDetail');
    },
    handleSelect(key, keyPath) {
      console.log(keyPath[0]);

      let cityParentId = this.$router.currentRoute.query.cityParentId;
      if (cityParentId == null || cityParentId == '') {
        cityParentId = 2;
      }
      if (keyPath[0] == "/index") {
        let path = this.$router.currentRoute.path;
        if ('/index'!=path) {
          this.$router.push('/index');
        }
      }
      if (keyPath[0] == '3' || keyPath[0] == "/lease-house") {
        if (this.$router.currentRoute.path!=key) {
          this.$router.push(key+'?cityParentId='+cityParentId)
        }
      }
      if (keyPath[0] == '4') {
        let path = this.$router.currentRoute.path;
        if (path == '/news-list') {
          let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
          if (key != newsCategoryId) {
            // this.$router.push('/news-list?newsCategoryId=' + key);
            // this.$router.push({path:'news-list',query:{newsCategoryId: key}});
            this.updateQueryParameter('newsCategoryId', key)
            this.$router.go(0);
          }
        } else {
          let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
          if (key != newsCategoryId) {
            this.$router.push('/news-list?newsCategoryId=' + key);
          }
        }
        this.loadCityName();
        // let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
        // if (key != newsCategoryId) {
        //   // this.$router.push('/news-list?newsCategoryId=' + key);
        //   // this.$router.push({path:'news-list',query:{newsCategoryId: key}});
        //   this.updateQueryParameter('newsCategoryId', key)
        // }
      }
    },
    updateQueryParameter(key, value) {
      const query = Object.assign({}, this.$route.query, {[key]: value})
      this.$router.replace({path: this.$route.path, query})
    },
    loadLoginInfo() {
      let loginInfo = localStorage.getItem('localUserJwt');

      if (loginInfo) {

      let url = 'http://localhost:9200/user/standard';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.loginUser = jsonResult.data;
        }
      });
        this.ifs = true;
      }else {
        this.ifs = false;
      }
    },
    //根据id查询登入用户信息
    informationByid(){
      let url = 'http://localhost:9200/user/standard';
      console.log('url=' + url);
       this.axios.get(url).then((response) => {
         let jsonResult = response.data;
         if (jsonResult.state == 20000) {
           this.loginUser = jsonResult.data;
         }
       });
    },
    // 打开登出确认框
    openLogout() {
      let message = '即将退出登录，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    // 处理登出
    handleLogout() {
      localStorage.removeItem('localUserJwt');
      this.loadLoginInfo();
    },
    loadNewsCategory() {
      let url = 'http://localhost:9200/news-category/list';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsCategoryList = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadCity() {
      let url = 'http://localhost:9200/section/list-by-parent?parentId=1';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.cityList = jsonResult.data.list;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadCityName() {
      let cityParentId = this.$router.currentRoute.query.cityParentId;

      if (cityParentId == null || cityParentId == '') {
        return;
      }

      let url = 'http://localhost:9200/section/standard?id=' + cityParentId;

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.city = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // loadIndex() {
    //   let path = this.$router.currentRoute.path;
    //   if (path == '/' || path == '/index') {
    //     this.$router.push('/index')
    //   }
    // },
    handleActiveMenuItem() {
      let path = this.$router.currentRoute.path;
      if (path.startsWith('/index')) {
        path = '/index';
      }
      if (path.startsWith('/lease-house')) {
        path = '/lease-house';
      }
      // if (path.startsWith('/new-house')) {
      //   path = '/new-house';
      // }
      // if (path.startsWith('/second-hand-house')) {
      //   path = '/second-hand-house';
      // }
      // if (path.startsWith('/news-list')) {
      //   path = '/news-list';
      // }
      this.activeMenuItemPath = path;
    }
  },

  mounted() {
    // this.loadIndex();
    this.handleActiveMenuItem();
    this.loadNewsCategory();
    this.loadCity();
    this.loadCityName();
    this.loadLoginInfo();
    this.informationByid();
  }
}
</script>

<style>
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
  background-color: #00b4aa !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 0px !important;
  background-color: #00b4aa  !important;
}

.el-menu--popup {
  min-width: 116px !important;
}
element.style {
  color: rgb(255, 255, 255);
  background-color: rgb(65, 203, 192);
  width: 116px !important;
  position: relative;
}
.el-dropdown-link {
  cursor: pointer;
  color: whitesmoke;
  font-size: 10px;
  position: relative;
  top: 20px;
  left: 10px;
}
.el-icon-arrow-down {
  font-size: 6px;
}
.el-dropdown-menu {
  /*position: absolute;*/
  top: 52px !important;
  /*left: 320px !important;*/
  /*z-index: 10;*/
  /*padding: 10px 0;*/
  /*margin: 5px 0;*/
  /*background-color: #41cbc0 !important;*/
  /*border: 1px solid #41cbc0 !important;*/
  border-radius: 4px;
  /*box-shadow: 0 50px 12px 0 rgba(0,0,0,.1) !important;*/
}
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}



.uoko-nav {
  background-color: #41cbc0;
  height: 60px;
}
.uoko-navbar a {
  color: #fff;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  padding-left: 14px;
  padding-right: 14px;
}
.uoko-navbar li {
  float: left;
}
.site-logo img {
  vertical-align: middle;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.uoko-navbar-left {
  float: left;
  padding-left: 43px;
}
.uoko-navbar {
  float: left;
  margin-left: 55px;
  -webkit-text-size-adjust: 100%;
  font-family: Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,Arial,STHeiti,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  float: left;
  margin-left: 55px;
}
.site-logo {
  font-size: 0;
  display: inline-block;
  vertical-align: top;
  height: 60px;
  line-height: 56px;
}
.container {
  width: 1170px;
  margin: auto;
}
.uoko-navbar li.active a {
  background-color: #27a7a4;
}
a, a:visited {
  text-decoration: none;
  border-width: 0;
}
ol, ul {
  list-style: none;
  list-style-image: none;
}
dl, menu, ol, ul {
  margin: 0;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.uoko-navbar a:hover {
  background-color: #2cbcb8;
}
a, a:visited {
  text-decoration: none;
  border-width: 0;
}
.login-box {
  height: 60px;
  line-height: 60px;
  color: #fff;
}
.uoko-navbar-right {
  float: right;
}
.login-box a {
  color: #fff;
  padding: 0 8px;
}
.footer {
  background-color: #41cbc0;
  padding-top: 50px;
  padding-bottom: 20px;
  height: 150px;
}
.footer .container {
  box-sizing: border-box;
  padding: 0 20px;
}
.container {
  width: 1170px;
  margin: auto;
}
.footer-slogan, .social {
  float: left;
}
.footer-slogan {
  margin-right: 16px;
}
.social {
  width: 350px;
  padding-top: 17px;
}
.qr-code {
  float: left;
  margin-left: -18px;
  margin-top: -20px;
}
.ext-links {
  padding-left: 5em;
  font-size: 12px;
  margin-top: 30px;
}
div {
  display: block;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.footer-slogan, .social {
  float: left;
}
.footer-slogan {
  margin-right: 16px;
}
.social {
  width: 350px;
  padding-top: 17px;
}
.social a {
  background-color: #2ea99f;
  width: 155px;
  margin-right: 15px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 3px;
  box-sizing: border-box;
}
a, a:visited {
  text-decoration: none;
  border-width: 0;
}
.instr, .instr-list {
  text-align: center;
}
.instr {
  background-color: #fff;
  padding: 15px 0;
}
.instr, .instr-list {
  text-align: center;
}
ol, ul {
  list-style: none;
  list-style-image: none;
}
menu, ol, ul {
  padding: 0;
}
dl, menu, ol, ul {
  margin: 0;
}

.instr-list li {
  margin: 0 30px;
}
.instr-quanlity {
  background-position: 0 -179px;
  width: 220px;
  height: 38px;
}
.instr-prom, .instr-quanlity {
  background-image: url(../assets/instr.png);
}
.sprites {
  display: inline-block;
  vertical-align: middle;
}
.instr-secure, .instr-serve {
  background-image: url(../assets/instr.png);
  width: 216px;
}
.instr-secure {
  background-position: 0 -120px;
  height: 39px;
}
.instr-serve {
  background-position: 0 -60px;
  height: 40px;
}
.instr-secure, .instr-serve {
  background-image: url(../assets/instr.png);
  width: 216px;
}
.instr-prom, .instr-quanlity {
  background-image: url(../assets/instr.png);
}
.instr-prom {
  background-position: 0 0;
  width: 223px;
  height: 40px;
}
.text-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
p, pre {
  margin: 0;
}
.bottom {
  height: 80px;
}
.bottom, .bottom a {
  color: #fff;
}
.bottom {
  background-color: #30aaa0;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.container {
  width: 1170px;
  margin: auto;
}
.beian-info {
  line-height: 20px;
}
.text-center {
  text-align: center;
}
.container {
  width: 1170px;
  margin: auto;
}
.site-info {
  float: left;
  font-size: 12px;
  line-height: 43px;
}
.bottom-nav {
  float: left;
  margin-left: 10px;
}
a, a:visited {
  text-decoration: none;
  border-width: 0;
}

.bottom-nav a, .bottom-nav li {
  display: inline-block;
}
.bottom-nav a {
  padding: 0 15px;
}
.bottom-nav a, .bottom-nav li {
  display: inline-block;
}
.icon-ga {
  background: url(../assets/public_security.png) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
}
</style>



